<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div style="margin: 20px auto; width: 1200px;">
		<canvas id="canvasa" width="550" height="500" style="border: 1px solid blue; display: block; float: left;">
			浏览器不支持
		</canvas>
		<canvas id="canvasb" width="550" height="500"  style="border: 1px solid yellow;  display: block;float: right;">
			浏览器不支持
		</canvas>
		</div>
		<div style="clear: both;"></div>
		<div style="text-align: center;margin-top:50px;font-size: 20px ;">
		<a href="javascript:blackAndWhiteEffect();">黑白滤镜</a>
		<a href="javascript:greyEffect();">灰度滤镜</a>
		<a href="javascript:reverseEffect();">反色滤镜</a>
		<a href="javascript:blureEffect();">模糊滤镜</a>
		<a href="javascript:blureAddEffect();">任意模糊滤镜</a>
		<a href="javascript:mosaicEffect();">马赛克滤镜</a>
		</div>
	</body>
	<script>
		var canvasa = document.getElementById("canvasa");
		var contexta = canvasa.getContext("2d");
		var canvasb = document.getElementById("canvasb");
		var contextb = canvasb.getContext("2d");
		var image = new Image();
		
		window.onload= function(){
			image.src="../img/hudie.jpg";
			image.onload =function(){
				contexta.drawImage(image,0,0,canvasa.width,canvasb.height);
			}
		}
	
	function greyEffect(){
		contextb.clearRect(0,0,canvasb.width,canvasb.height);
		var imageDta =	contexta.getImageData(0,0,canvasa.width,canvasa.height);//取的是a的全部
		//遍历b像素点
		var pixeldata = imageDta.data;
		for(var i=0;i<canvasb.width*canvasb.height;i++){
		var r=	pixeldata[4*i+0];
		var g=	pixeldata[4*i+1];
		var b=	pixeldata[4*i+2];
		var grey = r*0.3+g*0.59+b*0.11;//灰度计算公式
		//赋值
			pixeldata[4*i+0]=grey;
			pixeldata[4*i+1]=grey;
			pixeldata[4*i+2]=grey;
		
		}
		contextb.putImageData(imageDta,0,0,0,0,canvasb.width,canvasb.height);
		}
	function blackAndWhiteEffect(){
		contextb.clearRect(0,0,canvasb.width,canvasb.height);
		var imageDta =	contexta.getImageData(0,0,canvasa.width,canvasa.height);//取的是a的全部
		//遍历b像素点
		var pixeldata = imageDta.data;
		for(var i=0;i<canvasb.width*canvasb.height;i++){
		var r=	pixeldata[4*i+0];
		var g=	pixeldata[4*i+1];
		var b=	pixeldata[4*i+2];
		var grey = r*0.3+g*0.59+b*0.11;//灰度计算公式
		if(grey>255/2){
			v =255;
		}else{
			v=0;
		}
			pixeldata[4*i+0]=v;
			pixeldata[4*i+1]=v;
			pixeldata[4*i+2]=v;
		
		}
		contextb.putImageData(imageDta,0,0,0,0,canvasb.width,canvasb.height);
		}
	function reverseEffect(){
		contextb.clearRect(0,0,canvasb.width,canvasb.height);
		var imageDta =	contexta.getImageData(0,0,canvasa.width,canvasa.height);//取的是a的全部
		//遍历b像素点
		var pixeldata = imageDta.data;
		for(var i=0;i<canvasb.width*canvasb.height;i++){
		var r=	pixeldata[4*i+0];
		var g=	pixeldata[4*i+1];
		var b=	pixeldata[4*i+2];
		
			pixeldata[4*i+0]=255-r;
			pixeldata[4*i+1]=255-g;
			pixeldata[4*i+2]=255-b;
		
		}
		contextb.putImageData(imageDta,0,0,0,0,canvasb.width,canvasb.height);
		}
	function blureEffect(){
		contextb.clearRect(0,0,canvasb.width,canvasb.height);
		
		var imageData =	contexta.getImageData(0,0,canvasa.width,canvasa.height);
		var pixeldata = imageData.data;
		//存储
		var tmpImageData =	contexta.getImageData(0,0,canvasa.width,canvasa.height);
		var tmpPixeldata = tmpImageData.data;
		//外层二维遍历宽度和高度
		for(var i=1;i<canvasb.height-1;i++){//从1开始避免数组越界
			for (var j=1;j<canvasb.width-1;j++) {
				//遍历每个点的周边像素点（）
				var totalr=0,totalg=0,totalb=0;//记录总和
				for (var  dx=-1;dx<=1;dx++) {//参考一个像素点周围的8个点共 3*3=9
					for (var dy=-1;dy<=1;dy++) {
						var x =i+dx;//从1开始避免数组越界
						var y = j+dy;
						//该像素点
						var p =x*canvasb.width+y;
						totalr +=tmpPixeldata[p*4+0];
						totalg +=tmpPixeldata[p*4+1];
						totalb +=tmpPixeldata[p*4+2];
					}
				}
				//当前点 第x行第y列的像素
				var p =i*canvasb.width+j;
				//赋值
				pixeldata[p*4+0]=totalr/9; 
				pixeldata[p*4+1]=totalg/9;
				pixeldata[p*4+2]=totalb/9;
				
				
			}
		}
	
		contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
		}
	//模糊改进
	function blureAddEffect(){
		contextb.clearRect(0,0,canvasb.width,canvasb.height);
		
		var imageData =	contexta.getImageData(0,0,canvasa.width,canvasa.height);
		var pixeldata = imageData.data;
		//临时存储
		var tmpImageData =	contexta.getImageData(0,0,canvasa.width,canvasa.height);
		var tmpPixeldata = tmpImageData.data;
		var blurR =5;//模糊半径
		//外层二维遍历宽度和高度
		for(var i=blurR;i<canvasb.height-blurR;i++){//避免数组越界值blurR
			for (var j=blurR;j<canvasb.width-blurR;j++) {
				//遍历每个点的周边像素点（）
				var totalr=0,totalg=0,totalb=0;//记录总和
				for (var  dx=-blurR;dx<=blurR;dx++) {//参考一个像素点周围的点共(2*blurR+1)*(2*blurR+1)
					for (var dy=-blurR;dy<=blurR;dy++) {
						var x =i+dx;//避免数组越界blurR
						var y = j+dy;
						//该像素点
						var p =x*canvasb.width+y;
						totalr +=tmpPixeldata[p*4+0];//r像素总和
						totalg +=tmpPixeldata[p*4+1];
						totalb +=tmpPixeldata[p*4+2];
					}
				}
				//当前点 第x行第y列的像素
				var p =i*canvasb.width+j;
				//赋值
				totleR =(2*blurR+1)*(2*blurR+1);//总点数
				pixeldata[p*4+0]=totalr/totleR; 
				pixeldata[p*4+1]=totalg/totleR;
				pixeldata[p*4+2]=totalb/totleR;
				
				
			}
		}
	
		contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
		}
	
		//马赛克
		function mosaicEffect(){
		contextb.clearRect(0,0,canvasb.width,canvasb.height);
            var tmpImageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height )
            var tmpPixelData = tmpImageData.data

            var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height )
            var pixelData = imageData.data

            var size = 8;//马赛克小块半径
            var totalnum = size*size
            //外层二维遍历宽度和高度
            for( var i = 0 ; i < canvasb.height ; i += size ){//一块一块的遍历
                for( var j = 0 ; j < canvasb.width ; j += size ){
						//遍历每个点的周边像素快像素（）
                    var totalr = 0 , totalg = 0 , totalb = 0
                    for( var dx = 0 ; dx < size ; dx ++ )
                        for( var dy = 0 ; dy < size ; dy ++ ){

                            var x = i + dx;
                            var y = j + dy;
							//当前点 在快范围内的像素点
                            var p = x*canvasb.width + y;
                            totalr += tmpPixelData[p*4+0];//和
                            totalg += tmpPixelData[p*4+1];
                            totalb += tmpPixelData[p*4+2];
                        }
					//当前点 第i行第j列的像素
                    var p = i*canvasb.width+j;
                    //平均值
                    var resr = totalr / totalnum;
                    var resg = totalg / totalnum;
                    var resb = totalb / totalnum;
                    
					//将一个点在快内的平均值赋给当前点
					//为每个点 赋值
                    for( var dx = 0 ; dx < size ; dx ++ ){
                        for( var dy = 0 ; dy < size ; dy ++ ){

                            var x = i + dx;
                            var y = j + dy;

                            var p = x*canvasb.width + y;
                            pixelData[p*4+0] = resr;
                            pixelData[p*4+1] = resg;
                            pixelData[p*4+2] = resb;
                        }
                       } 
            }
		}	
            contextb.putImageData( imageData , 0 , 0 , 0 , 0 , canvasb.width, canvasb.height );

        }
	</script>
</html>
